<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="68px">

            <el-form-item label="业务类型" prop="businessType">
                <el-select v-model="queryParams.businessType" placeholder="操作类型" clearable style="width: 240px">
                    <el-option v-for="dict in dict.type.sys_oper_type" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
            </el-form-item>

            <el-form-item label="会员类型" prop="memberType">
                <el-select v-model="queryParams.memberType" placeholder="请选择会员类型" clearable style="width: 240px">
                    <el-option v-for="dict in dict.type.sys_member_type" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
            </el-form-item>

            <el-form-item label="操作地址" prop="operIp">
                <el-input v-model="queryParams.operIp" placeholder="请输入操作地址" clearable style="width: 240px;" />
            </el-form-item>

            <el-form-item label="操作类别" prop="operatorType">
                <el-select v-model="queryParams.operatorType" placeholder="请选择操作类别" clearable style="width: 240px">
                    <el-option v-for="dict in dict.type.sys_operator_type" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
            </el-form-item>

            <el-form-item label="操作状态" prop="status">
                <el-select v-model="queryParams.status" placeholder="操作状态" clearable style="width: 240px">
                    <el-option v-for="dict in dict.type.sys_common_status" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
            </el-form-item>


            <el-form-item label="系统模块" prop="title">
                <el-input v-model="queryParams.title" placeholder="请输入系统模块" clearable style="width: 240px;" />
            </el-form-item>

            <el-form-item label="操作人员" prop="operName">
                <el-input v-model="queryParams.operName" placeholder="请输入操作人员" clearable style="width: 240px;" />
            </el-form-item>

            <el-form-item label="操作时间">
                <el-date-picker v-model="queryParams.operTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
                    type="daterange" range-separator="-" start-placeholder="开始日期"
                    end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple"
                    @click="handleDelete">删除</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="" icon="el-icon-delete" size="mini" @click="handleClean">清空</el-button>
            </el-col>
            <!-- <el-col :span="1.5">
                <el-button type="warning" icon="el-icon-upload" size="mini" :disabled="multiple"
                    @click="handleExport">导出</el-button>
            </el-col> -->
        </el-row>

        <el-table border ref="tables" v-loading="loading" :data="list" @selection-change="handleSelectionChange"
            :default-sort="defaultSort" @sort-change="handleSortChange">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="日志编号" align="center" prop="operId" />
            <el-table-column label="系统模块" align="center" prop="title" :show-overflow-tooltip="true" />
            <el-table-column label="操作类型" align="center">
                <template slot-scope="scope">
                    <div>{{ userType(scope.row.businessType) }}</div>
                </template>
            </el-table-column>
            <el-table-column label="操作人员" align="center" prop="operName" width="110" :show-overflow-tooltip="true" />
            <el-table-column label="操作地址" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" />
            <el-table-column label="操作地点" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div>{{ scope.row.operLocation ? scope.row.operLocation : '无' }}</div>
                </template>
            </el-table-column>
            <el-table-column label="操作状态" align="center">
                <template slot-scope="scope">
                    <div>{{ scope.row.status == 1 ? '正常' : '异常' }}</div>
                </template>
            </el-table-column>
            <el-table-column label="操作日期" align="center" width="160" sortable="custom"
                :sort-orders="['descending', 'ascending']">
                <template slot-scope="scope">
                    <span>{{ scope.row.operTime ? scope.row.operTime : '无' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="消耗时间" align="center" prop="costTime" width="110" :show-overflow-tooltip="true"
                sortable="custom" :sort-orders="['descending', 'ascending']">
                <template slot-scope="scope">
                    <span>{{ scope.row.costTime }}毫秒</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-view"
                        @click="handleView(scope.row.operId)">详细</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList" @current-change="changePage" />
        </div>


        <!-- 操作日志详细 -->
        <el-dialog title="操作日志详细" :visible.sync="open" width="60%" append-to-body>
            <el-form ref="form" :model="form" label-width="100px" size="mini">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="业务类型：">
                            {{ userType(form.businessType) }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="消耗时间：">{{ form.costTime }}ms</el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="创建者：">{{ form.createBy ? form.createBy : '无' }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="创建时间：">{{ form.createTime ? form.createTime : '无' }}</el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="删除者：">{{ form.delBy ? form.delBy : '无' }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="未删除的值：">{{ delFlagType(form.delFlag) }}</el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="删除时间：">{{ form.delTime ? form.delTime : '无' }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="错误消息：">{{ form.errorMsg ? form.errorMsg : '无' }}</el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="返回参数：">
                            {{ form.jsonResult }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="会员类型：">
                            {{ form.memberType }}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="方法名称：">
                            {{ form.method }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="日志主键：">
                            {{ form.operId }}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="主机地址："> {{ form.operIp }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="操作地点："> {{ form.operLocation ? form.operLocation : '无' }}</el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="操作人员："> {{ form.operName }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="请求参数："> {{ form.operParam }}</el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="操作时间："> {{ form.operTime ? form.operTime : '无' }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="请求URL："> {{ form.operUrl }}</el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="操作类别："> {{ form.operatorType }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="请求方式："> {{ form.requestMethod }}</el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="操作状态："> {{ form.status }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="模块标题："> {{ form.title }}</el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="更新者："> {{ form.updateBy ? form.updateBy : '无' }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="更新时间："> {{ form.updateTime }}</el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { controlLogApi, controlDetailApi, delControlLogApi } from '@/api/system';
export default {
    name: "operlog",
    data() {
        return {
            showSearch: true,
            queryParams: {
                // 业务类型
                businessType: '',
                // 会员类型
                memberType: "",
                // 主机地址
                operIp: "",
                // 操作类别
                operatorType: "",
                // 操作状态
                status: "",
                // 模块标题
                title: '',
                // 操作人员
                operName: '',
                operTime: "",
                page: 1,
                limit: 10,
                dateRange: null
            },
            list: [],
            total: 0, // 总记录数
            loading: false,
            defaultSort: {
                prop: 'operTime',
                order: 'descending'
            },
            open: false,
            form: {
                "businessType": "",
                "costTime": 0,
                "createBy": "",
                "createTime": "",
                "delBy": "",
                "delFlag": "",
                "delTime": "",
                "errorMsg": "",
                "jsonResult": "",
                "memberType": 0,
                "method": "",
                "operId": 0,
                "operIp": "",
                "operLocation": "",
                "operName": "",
                "operParam": "",
                "operTime": "",
                "operUrl": "",
                "operatorType": "",
                "requestMethod": "",
                "status": "",
                "title": "",
                "updateBy": "",
                "updateTime": ""
            },
            dict: {
                type: {
                    sys_oper_type: [
                        { value: '1', label: '其他' },
                        { value: '2', label: '新增' },
                        { value: '3', label: '修改' },
                        { value: '4', label: '删除' },
                    ],
                    sys_member_type: [
                        { value: '1', label: '普通管理员' },
                        { value: '2', label: '数据场' },
                        { value: '3', label: '运营中心' },
                        { value: '4', label: 'B级公司' },
                        { value: '5', label: '总后台' },
                    ],
                    sys_operator_type: [
                        { value: '0', label: '其它' },
                        { value: '1', label: '后台用户' },
                        { value: '2', label: '手机端用户' },
                    ],
                    sys_common_status: [
                        { value: '1', label: '正常' },
                        { value: '2', label: '异常' },
                    ]
                }
            },
            selectRow: []
        }
    },
	mounted() {
	  this.handleQuery();
	},
    methods: {
        async handleQuery() {
            console.log(this.queryParams, 'queryParams');
            const res = await controlLogApi(this.queryParams)
            this.list = res.list
            this.total = res.total
        },
        resetQuery() {
            this.queryParams = {
                // 业务类型
                businessType: '',
                // 会员类型
                memberType: "",
                // 主机地址
                operIp: "",
                // 操作类别
                operatorType: "",
                // 操作状态
                status: "",
                // 模块标题
                title: '',
                // 操作人员
                operName: '',
                operTime: "",
                page: 1,
                limit: 10,
                dateRange: null
            }
			this.handleQuery();
        },
        async handleDelete() {
            try {
                const confirm = await this.$confirm('确认删除？')
                if (!confirm) return
                let operIds = this.selectRow.map(v => v.operId)
                await delControlLogApi(operIds)
                this.$message.success('删除数据成功')
                this.handleQuery()
            } catch (error) { this.$message.error('删除数据失败') }
        },
        handleClean() {
            this.selectRow = []
            this.$refs['tables'].clearSelection()
        },
        handleExport() {

            console.log(this.selectRow, 'select');

        },
        handleSelectionChange(e) {
            this.selectRow = e
        },
        handleSortChange() { },
        getList() { },
        async handleView(operId) {
            const res = await controlDetailApi(operId)
            this.form = res
            this.open = true
        },
        parseTime(time) {
            return new Date(time).toLocaleString();
        },
        typeFormat(row) {
            const type = this.dict.type.sys_oper_type.find(item => item.value === row.businessType);
            return type ? type.label : '';
        },
        userType(val) {
            // 1其它 2新增 3修改 4删除
            if (val == 1) return "其它"
            if (val == 2) return "新增"
            if (val == 3) return "修改"
            if (val == 4) return "删除"
        },
        delFlagType(val) {
            if (val == 0) return "已删除的值"
            if (val == 1) return "可用值"
        },
        changePage(e) {
            this.queryParams.page = e
            this.handleQuery()
        },
    },
    computed: {
        multiple() {
            return (this.selectRow.length === 0 ? true : false)
        }
    }
}
</script>

<style scoped lang="scss">
.mb8 {
    margin-bottom: 24px;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
